<template>
  <div class="technicalDesign">
    <div class="printImg">
      <img src="@/assets/third/print.png" alt="">
    </div>
    <div class="addadvice">
      <div class="header">
        <div class="title">审查意见录入</div>
        <!--          <div class="export">-->
        <!--            <img src="../../../../assets/third/downloadlogo.png" />导出审查意见-->
        <!--          </div>-->
      </div>
      <div v-if="!showadd">
        <div class="menulist">
          <div class="item" @click="chooseTab(true)" :class="tabSwitch ? 'active':'' ">复审意见</div>
          <div class="item" @click="chooseTab(false)" :class="!tabSwitch ? 'active':'' ">初审意见</div>
          <div class="add" v-show="tabSwitch" @click="addadvice">新增</div>
          <div style="clear:both;"></div>
        </div>
        <div class="advicelist" v-show="tabSwitch">
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：
                <el-radio v-model="radio" label="1">已修改</el-radio>
                <el-radio v-model="radio" label="2">未修改</el-radio>
              </div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
        </div>

        <div class="advicelist" v-show="!tabSwitch">
          <div class="item">
            <div class="situation">
              <div class="msg" style="margin-top:0;">附件名称：可研究性报告</div>
              <div class="msg">问题描述：部分内容缺失</div>
              <div class="msg">修改情况：已修改</div>
            </div>
            <div class="other">
              <div class="date">2018/10/03</div>
              <div class="delete">删除</div>
            </div>
          </div>
        </div>
      </div>

      <el-form v-if="showadd" class="reviewIdea" :model="form" label-width="80px" style="margin-top:30px;">
        <el-form-item label="附件名称" >
          <el-select placeholder="请选择" v-model="form.name">
            <el-option label="可研究性报告" value="可研究性报告"></el-option>
            <el-option label="踏勘选址报告" value="踏勘选址报告"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="form.question" rows="4">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="showadd=false">取消</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                    name:'',
                    question:'',
                },
                showadd:false,
                radio:"1",
                tabSwitch: true,
            };
        },
        methods: {
            onSubmit(){
                this.showadd = false;
            },
            addadvice(){
                this.showadd = true;
            },
            chooseTab (flag) {
                this.tabSwitch = flag
            }
        }
    }
</script>

<style lang="scss" scoped>
.technicalDesign {
  display: flex;
  padding: 40px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .printImg{
    width:33%;
    overflow: hidden;
    border: 1px solid #E1E2E6;
    img{
      width: 100%;
      display: block;
    }
  }
  .addadvice{
    margin-left: 7%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    .header{
      margin-top: 24px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      padding: 30px 30px 20px;
      border-bottom: 1px solid #e4e4e4;;
      .title{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-size:18px;
        font-family:PingFang SC;
        font-weight:bold;
        line-height:25px;
        color: #4d4d4d;
      }
      .export{
        font-size:14px;
        font-family:PingFang SC;
        font-weight:500;
        line-height:20px;
        color: #737373;
        img{
          width: 12px;
          margin-right: 3px;
        }
      }
    }
    .menulist{
      margin-top: 20px;
      .item{
        width:88px;
        height:36px;
        background: #ffffff;
        line-height: 36px;
        text-align: center;
        font-size:14px;
        font-family:PingFang SC;
        font-weight:500;
        color: #999999;
        margin-right: 8px;
        float: left;
        cursor: pointer;
        &.active{
          background: #EEF3F8;
          color: #1D88F3;
        }
      }
      .add{
        float: right;
        width:60px;
        height:28px;
        background:rgba(64,158,255,1);
        border-radius:2px;
        text-align: center;
        line-height: 28px;
        font-size:14px;
        font-family:PingFang SC;
        font-weight:500;
        color: #ffffff;
        margin-top: 4px;
        cursor: pointer;
        margin-right: 30px;
      }
    }
    .advicelist{
      margin-top: 10px;
      .item{
        padding: 20px 30px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        border-bottom: 1px solid #e4e4e4;
        .situation{
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          .msg{
            margin-top: 10px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            line-height:20px;
            color: #8c8c8c;
          }
        }
        .other{
          text-align: right;
          .date{
            height:18px;
            font-size:13px;
            font-family:PingFang SC;
            font-weight:500;
            line-height:18px;
            color: #999999;
          }
          .delete{
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            line-height:20px;
            margin-top: 12px;
            color: #F92828;
            cursor: pointer;
          }
        }
      }
    }

    // form
    .reviewIdea {
      /deep/ .el-form-item__label {
        color: #8C8C8C;
        font-size: 14px;
      }
    }
  }
}
</style>
